import React from 'react'
import { Progress } from 'antd'
import PropTypes from 'prop-types'
import s from './index.less'

const renderInCont=(val) => {
  return(
    <div className={s['in-box']}>
      <span className={s['number']}>{val}%</span>
      <p className={s['tip']}>实际占比</p>
    </div>
  )
}
const Comp= ({number}) => {
  return(
    <div className={s['out-box']}>
      <Progress
        width={140}
        type="dashboard"
        percent={number}
        format={renderInCont}
        gapDegree={150}
        strokeWidth={5}
        strokeColor={{
          '0%': '#34C5D2',
          '100%': '#8BECF5'
        }}
      />
    </div>
  )
}
Comp.propTypes = {
  number: PropTypes.number.isRequired,
}

export default Comp
